﻿@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Modals> Localizer

<div class="row g-3">
    <div class="col-12 col-sm-4 col-lg-auto">
        <Button OnClick="() => SmailModal.Toggle()">@Localizer["ModalsSmallPopup"]</Button>
        <Modal @ref="SmailModal">
            <ModalDialog Size="Size.Small" Title="@Localizer["ModalsSmallPopup"]">
                <BodyTemplate>
                    <div>@Localizer["ModalsTitlePopupWindowText"]</div>
                </BodyTemplate>
            </ModalDialog>
        </Modal>
    </div>
    <div class="col-12 col-sm-4 col-lg-auto">
        <Button OnClick="() => LargeModal.Toggle()">@Localizer["ModalsBigPopup"]</Button>
        <Modal @ref="LargeModal">
            <ModalDialog Size="Size.Large" Title="@Localizer["ModalsBigPopup"]">
                <BodyTemplate>
                    <div>@Localizer["ModalsTitlePopupWindowText"]</div>
                </BodyTemplate>
            </ModalDialog>
        </Modal>
    </div>
    <div class="col-12 col-sm-4 col-lg-auto">
        <Button OnClick="() => ExtraLargeModal.Toggle()">@Localizer["ModalsOversizedPopup"]</Button>
        <Modal @ref="ExtraLargeModal">
            <ModalDialog Size="Size.ExtraLarge" Title="@Localizer["ModalsOversizedPopup"]">
                <BodyTemplate>
                    <div>@Localizer["ModalsTitlePopupWindowText"]</div>
                </BodyTemplate>
            </ModalDialog>
        </Modal>
    </div>
    <div class="col-12 col-sm-4 col-lg-auto">
        <Button OnClick="() => ExtraExtraLargeModal.Toggle()">@Localizer["ModalsSuperLargePopup"]</Button>
        <Modal @ref="ExtraExtraLargeModal">
            <ModalDialog Size="Size.ExtraExtraLarge" Title="@Localizer["ModalsSuperLargePopup"]">
                <BodyTemplate>
                    <div>@Localizer["ModalsTitlePopupWindowText"]</div>
                </BodyTemplate>
            </ModalDialog>
        </Modal>
    </div>
</div>

@code {
    [NotNull]
    private Modal? SmailModal { get; set; }

    [NotNull]
    private Modal? LargeModal { get; set; }

    [NotNull]
    private Modal? ExtraLargeModal { get; set; }

    [NotNull]
    private Modal? ExtraExtraLargeModal { get; set; }
}
